<template>
	<view class="content">
		<view class="search_box">
			<view class="relative">
				<input type="text" class="search_input" placeholder="输入搜索关健词..."/>
				<button type="submit" class="searchicon"><view class="coolc icon-search"></view></button>
			</view>
		</view>
		<view class="indexad_2"><img src="~@/static/ad1.jpg"></view>
		<view class="pagebody">
			<view class="tab-bar">
				<scroll-view id="tab-bar" class="swiper-tab">
					<view class="swiper-tab-list active">综合排序</view>
					<view class="swiper-tab-list">销量排序</view>
					<view class="swiper-tab-list">最新上架</view>
				</scroll-view>
			</view>
			<view class="goods_list">
				<goods-list v-for="(item, index) in goodsList[0].list" :key="index" v-bind:item="item"></goods-list>
			</view>
		</view>
		
		<!-- 顶部右侧菜单 -->
		<view v-bind:class="['navBarButtonBox',navBarButton ? '' : 'vb','']">
			<view class="h_newlit" v-bind:class="[navBarButton ? 'active' : '','']">
				<view class="em">
					<view class="livs">
						<i class="coolc icon-zhuye"></i> <span>首页</span>
					</view>
					<view class="livs">
						<i class="coolc icon-shangjialiebiaoicon"></i> <span>品牌列表</span>
					</view>
					<view class="livs">
						<i class="coolc icon-fenlei"></i> <span>商品分类</span>
					</view>
					<view class="livs">
						<i class="coolc icon-shipin"></i> <span>视频导购</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部右侧菜单 -->
		
	</view>
</template>

<script>
	import goodsList from '@/components/goods-list';
	import {  
		mapState 
	} from 'vuex';  
   export default {
		components: {
			goodsList
		},
		data(){
			return {
				goodsList: [{}, {}],
				navBarButton:false
			}
		},
		onLoad(){
			this.loadData();
			setTimeout(()=> {
				this.renderImage = true;
			}, 300);
		},

		onNavigationBarButtonTap:function(){
			this.navBarButton = !this.navBarButton; 
		},
        methods: {
			async loadData() {
				let goodsList = await this.$api.json('goodsList');
				this.goodsList = goodsList;
			},
		}
    }  
</script>

<style lang="scss">
page { height:calc(100%) - var(--window-bottom)!important; background:$bgcolor_white; }
</style>